<template>
  <div>
    <gm-nav></gm-nav>
    <div class="main-container">
      <gm-title>
        <template v-slot:title>全部活动</template>
        <template v-slot:text>各种活动等你参加</template>
      </gm-title>
      <div class="carousel-box">
        <div class="left-img">
          <img
            src="https://cs.vmovier.com/Uploads/Banner/2021/11/02/6180f8ae141ff.jpg"
            alt=""
          />
        </div>
        <div class="right-info">
          <h2>
            <a href="javascript:;">黑人兄弟的搞笑日常</a>
          </h2>
          <div class="info-box">
            黑人兄弟绝对是喜剧界的一对活宝，两个黄金搭档总能用自己的独特方式演绎各种热点话题，反串、模仿、恶搞，各种脑洞层出不穷，自2011年6月8日推出至今，二人组吸粉无数，因为兄弟俩的日常实在是搞笑！
          </div>
          <button>点击查看</button>
        </div>
      </div>
      <div class="head-tab">
        <ul class="left-list">
          <li @click="addClick(0, 'gmAll')">
            <span :class="index == 0 ? 'active' : ''">全部活动</span>
          </li>
          <li @click="addClick(1, 'gmRiqian')">
            <span :class="index == 1 ? 'active' : ''">日签征集</span>
            <span></span>
          </li>
          <li @click="addClick(2, 'gmZhuanti')">
            <span :class="index == 2 ? 'active' : ''">专题活动</span>
          </li>
          <li @click="addClick(3, 'gmTebie')">
            <span :class="index == 3 ? 'active' : ''">特别企划</span>
          </li>
          <li @click="addClick(4, 'gmFensi')">
            <span :class="index == 4 ? 'active' : ''">粉丝福利</span>
          </li>
          <li @click="addClick(5, 'gmXianxia')">
            <span :class="index == 5 ? 'active' : ''">线下观影</span>
          </li>
          <li @click="addClick(6, 'gmHezuo')">
            <span :class="index == 6 ? 'active' : ''">合作推广</span>
          </li>
          <li>
            <span>活动合作申请</span>
          </li>
        </ul>
        <div class="right-list">
          <div class="all">
            <span>全部</span>
            <span class="iconfont icon-bottom-arrow"></span>
          </div>
          <ul>
            <li>报名中</li>
            <li>进行中</li>
            <li>展映中</li>
            <li>已结束</li>
          </ul>
        </div>
      </div>
      <div class="tab-content">
        <component :is="compName" :infoObj="dataObj"></component>
      </div>
    </div>
    <gm-footer></gm-footer>
  </div>
</template>

<script>
import gmNav from '../components/gmNav.vue'
import gmTitle from "@/components/gmTitle.vue";
import gmAll from "@/pages/activityChildren/gmAll.vue";
import gmRiqian from "@/pages/activityChildren/gmRiqian.vue";
import gmZhuanti from "@/pages/activityChildren/gmZhuanti.vue";
import gmTebie from "@/pages/activityChildren/gmTebie.vue";
import gmFensi from "@/pages/activityChildren/gmFensi.vue";
import gmXianxia from "@/pages/activityChildren/gmXianxia.vue";
import gmHezuo from "@/pages/activityChildren/gmHezuo.vue";
import gmFooter from "@/components/gmFooter.vue"

export default {
  name: "Activity",
  components: {
    gmNav,
    gmTitle,
    gmAll,
    gmRiqian,
    gmZhuanti,
    gmTebie,
    gmFensi,
    gmXianxia,
    gmHezuo,
    gmFooter
  },
  data() {
    return {
      compName: "gmAll",
      index: 0,
      dataObj: {},
    };
  },
  methods: {
    addClick(i, cn) {
      this.index = i; // 设置索引值
      this.compName = cn; // 设置组件名称
    },
  },
  mounted() {
    let url = "data/ckAct.json";
    let gms = axios.get(url);
    gms.then((res) => {
      this.dataObj = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  width: 1180px;
  margin: 0 auto;
  .carousel-box {
    display: flex;
    .left-img {
      width: 900px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-info {
      width: 280px;
      padding: 20px;
      box-sizing: border-box;
      background: #333;
      position: relative;
      h2 {
        a {
          font-size: 18px;
          color: #fff;
          font-weight: 500;
        }
      }
      .info-box {
        margin-top: 30px;
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
      }
      button {
        position: absolute;
        bottom: 22px;
        left: 20px;
        padding: 6px 10px;
        border-radius: 5px;
        background-color: #e74c3c;
        color: #fff;
        border: none;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          background-color: #fc5c4b;
        }
      }
    }
  }
  .head-tab {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
    ul.left-list {
      display: flex;
      height: 30px;
      z-index: 999;
      li {
        margin-right: 4px;
        span {
          display: block;
          text-align: center;
          line-height: 30px;
          font-size: 14px;
          cursor: pointer;
          padding: 0 10px;
          color: #333;
          &.active {
            background-color: #3498db;
            color: #fff;
            border-radius: 2px;
          }
          &:hover {
            background-color: #3498db;
            color: #fff;
            border-radius: 2px;
          }
        }
      }
      li:last-child {
        margin-left: 10px;
        span {
          background-color: #e74c3c;
          color: #fff;
          border-radius: 2px;
          &:hover {
            background-color: #fc5c4b;
            color: #fff;
            border-radius: 2px;
          }
        }
      }
    }
    .right-list {
      background-color: #fff;
      height: 30px;
      font-size: 14px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 999;
      &:hover {
        ul {
          display: block;
        }
      }
      .all {
        height: 30px;
        line-height: 30px;
        span:first-child {
          padding: 0 30px;
        }
        span:nth-child(2) {
          padding-right: 14px;
          font-size: 12px;
          font-weight: bold;
        }
      }
      ul {
        background-color: #fff;
        display: none;
        li {
          line-height: 30px;
          padding-left: 30px;
          &:hover {
            background-color: #3498db;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .tab-content{
      padding-bottom: 30px;
  }
}
</style>